<template>
  <div class="line" :style="{ height: '300px', width: '100%' }" />
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
import { historyHouseNum } from "@/api/dashboard";
export default {
  mixins: [resize],

  data() {
    return {
      chart: null,
      dataX: [],
      dataY: [],
    };
  },

  computed: {
    options() {
      return {
        xAxis: {
          type: "category",
          data: this.dataX,
          name: "月份",
        },
        yAxis: {
          type: "value",
          name: "数量",
        },
        series: [
          {
            data: this.dataY,
            type: "line",
          },
        ],
      };
    },
  },
  async mounted() {
    await this.getData();
    this.$nextTick(() => {
      this.initChart();
    });
  },

  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    async getData() {
      var res = await historyHouseNum();
      this.dataX = res.data.map((item) => item.date).reverse();
      this.dataY = res.data.map((item) => item.num);
    },

    initChart() {
      this.chart = echarts.init(this.$el, this.className);
      this.chart.setOption(this.options, true);
    },
  },
};
</script>
